<template>
  <el-dialog title="申报要素" width="60%" center :visible="invitor" @close="closeWin">
    <el-row :gutter="20" style="margin-bottom:10px">
        <el-col :span="12" style="margin-bottom:10px">
            <el-input
                placeholder="请输入商品编码"
                size="mini"
                v-model="keyword"
                :disabled="true"
                clearable>
                <template slot="prepend">商品信息</template>
            </el-input>
        </el-col>
        <el-col :span="24">
            <el-alert
                title="规格型号（根据海关规定，以下要素应全部填报）"
                type="warning"
            >
            </el-alert>
        </el-col>
    </el-row>
     <el-form ref='form' :model='form' >
    <el-checkbox-group v-model="checkList">
    <table class='restFormTable'  border-spacing=0 style="min-width:300px;width:100%;margin-bottom:10px"   >
      <tr>
        <td class='rest-tit canRow'>
          名称
        </td>
        <td class='rest-name'>
          申报要素
        </td>
        <td class='rest-tit'>
          是否必填
        </td>
      </tr>
      <tr v-for="(item, oindex) in optionSel">
        <td class='rest-tit canRow'>
            {{item.name}}
        </td>
        <td class='rest-input'>
            <el-form-item size='mini' v-if="item.name === '品牌类型'">
                <el-select 
                    v-model='form[item.code]' 
                    filterable 
                    ref="0Ref"
                    @keyup.enter.native="dealEnterCallback('1', $event, '0')" 
                    placeholder="请选择"
                    clearable
                    
                  >
                    <el-option
                    v-for="(item, index) in brands"
                    :key="index"
                    :label="item"
                    :value="index + ''">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item size='mini' v-else-if="item.name === '出口享惠情况'" >
                <el-select 
                    v-model='form[item.code]'
                     filterable 
                     clearable
                     ref="1Ref" 
                     @keyup.enter.native="dealEnterCallback('2', $event, '1')" 
                     placeholder="请选择"
                    >
                    <el-option
                    v-for="(item, index) in precents"
                    :key="index"
                    :label="item"
                    :value="index + ''">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item size='mini' v-else>
                <el-input 
                  :ref='oindex+"Ref"'
                  v-model='form[item.code]'
                  @keyup.enter.native="dealEnterCallback(oindex+1, $event)" 
                ></el-input>
            </el-form-item>
        </td>
        <td class='rest-tit'>
            <el-checkbox label="brand" v-if="item.name !== 'GTIN' && item.name !== 'CAS'" ></el-checkbox>
            <el-checkbox label="GTIN" v-else></el-checkbox>
            <div class="rest-mask"></div>
        </td>
      </tr>
      <tr>
        <td class='rest-tit'>
            其他
        </td>
        <td class='rest-input'>
            <el-form-item size='mini' >
                <el-input @keyup.enter.native="dealEnterCallback((optionSel.length+1), $event)"  :ref='optionSel.length+"Ref"' v-model='form[optionSel.length]'></el-input>
            </el-form-item>
        </td>
        <td class='rest-tit'>
            <el-checkbox label="GTIN" ></el-checkbox>
            <div class="rest-mask"></div>
        </td>
      </tr>
    </table>
    </el-checkbox-group>
    <el-form-item size='mini' label="规格型号"  label-width="80px">
        <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="specs"
            :disabled = "true"
        >
        </el-input>
    </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="selectData">确 定</el-button>
        <el-button size="mini" @click="hide">取 消</el-button>
    </div>
   </el-dialog>
</template>

<script>
export default {
  name: 'GetInfo',
  props: ['invitor', 'goodNo', 'goodsModel', 'brands', 'precents'],
  data() {
    return {
      form: [],
      formLabelWidth: '120px',
      keyword: '',
      specs: '',
      checkList: ['brand'],
      optionSel: []
    }
  },
  watch: {
    goodNo(cur) {
      this.keyword = cur
    },
    invitor(cur) {
      if (cur && this.goodsModel) {
        this.specs = this.goodsModel
        this.goodsModel.split('|').map((item, index) => {
          this.form[index + ''] = item
        })
      }
      if (cur) {
        this.findGoodDataByFilter({ 'hsCode': this.goodNo + '' }).then(res => {
          const {
            data,
            err
          } = res
          if (data.length > 0) {
            const optionSel = !err ? data[0].goodsModel : ''
            const arr = []
            optionSel.split(';').filter(item => {
              const [code, name] = item.split(':')
              if (code) {
                arr.push({
                  code,
                  name
                })
              }
            })
            this.optionSel = arr
          }
        })
      }
    },
    form: {
      immediate: true,
      deep: true,
      handler(cur) {
        this.specs = cur.join('|')
      }
    }
  },
  methods: {
    hide() {
      this.$emit('changingType', 'false', 'showInfo')
    },
    dealEnterCallback(type, event, curType) {
      if (type === (this.optionSel.length + 1)) {
        this.selectData()
      } else {
        this.$nextTick(() => {
          let dest
          if (this.$refs[type + 'Ref']) {
            dest = this.$refs[type + 'Ref']
            dest = dest instanceof Array ? dest[0] : dest
          }
          if (curType && this.$refs[curType + 'Ref']) {
            let prev = this.$refs[curType + 'Ref']
            if (prev instanceof Array) {
              prev = prev[0]
            }
            prev.blur()
          }
          dest.focus()
        })
      }
    },
    selectData() {
      this.$emit('dealEnterCallback', 'quantity')
      this.$emit('combineSelect', {
        'goodsModel': this.specs
      })
      this.hide()
    },
    // 获取商品信息
    findGoodDataByFilter(filterOb = {}) {
      return new Promise((resolve) => {
        this.$db.goodsData.find(filterOb, (err, docs) => {
          resolve({
            data: docs,
            err
          })
        })
      })
    },
    closeWin() {
      this.form = []
      this.hide()
    }
  }
}
</script>
